<template>
    <div class="box"
         v-show="show"
         @touchstart="touchstart"
         @touchmove="move"
         @touchend="hide"
    >
        <img :src="src"
             :alt="alt"
             ref="img"
             :class="{'transform': !hasMove}"
             :style="{transform: `translate(${imgPosX}px, ${imgPosY}px)`, width: `${imgWidth}px`}"
        >
    </div>
</template>

<script>
    export default {
        name: "imgLook",
        props: ['src', 'alt', 'show'],
        data() {
            return {
                imgWidth: 0,
                imgHeight: 0,
                imgAspectRatio: 0,
                touchStartWidth: 0,

                imgPosX: 0,
                imgPosY: 0,

                touches: {
                    pageX: 0,
                    pageY: 0,
                },
                startX: 0,
                startY: 0,
                touchesDis: 0,

                //两个手指
                is2f: false,

                //last time 2 finger
                lT2f: false,
                hasMove: false,
                moveThrottle: false,

                doubleKick: false,
                kickTimer: null,
                hasKick: false,
            }
        },
        methods: {
            init() {
                this.imgAspectRatio = this.$refs.img.naturalWidth / this.$refs.img.naturalHeight;

                if (this.$refs.img.naturalWidth > window.innerWidth) {
                    this.imgWidth = window.innerWidth;
                    this.imgHeight = window.innerWidth / this.imgAspectRatio;
                } else {
                    this.imgWidth = this.$refs.img.naturalWidth;
                    this.imgHeight = this.$refs.img.naturalHeight;
                }
                this.imgPosX = (window.innerWidth - this.imgWidth) / 2;
                this.imgPosY = (window.innerHeight - this.imgHeight) / 2;
            },

            touchstart(e) {
                clearTimeout(this.kickTimer);

                this.touches.pageX = e.touches[0].pageX;
                this.touches.pageY = e.touches[0].pageY;

                this.startX = this.imgPosX;
                this.startY = this.imgPosY;

                if (e.touches.length > 1) {
                    this.is2f = true;

                    this.touchStartWidth = this.imgWidth;

                    this.touchesDis = Math.sqrt(Math.pow((e.touches[0].pageX - e.touches[1].pageX), 2)
                        + Math.pow((e.touches[0].pageY - e.touches[1].pageY), 2))

                } else {
                    this.is2f = false;
                }
            },

            //当手指移动时
            move(e) {
                e.preventDefault();

                if (!this.moveThrottle) {
                    this.moveThrottle = true;

                    if (!this.hasMove) {
                        this.hasMove = true;
                    }

                    if (this.is2f) {
                        let nC = Math.sqrt(Math.pow((e.touches[0].pageX - e.touches[1].pageX), 2)
                            + Math.pow((e.touches[0].pageY - e.touches[1].pageY), 2));

                        this.imgWidth = this.touchStartWidth / this.touchesDis * nC;
                        this.imgHeight = this.imgWidth / this.imgAspectRatio;

                        this.imgPosX = (this.startX - this.touches.pageX) * nC / this.touchesDis + e.touches[0].pageX;
                        this.imgPosY = (this.startY - this.touches.pageY) * nC / this.touchesDis + e.touches[0].pageY;
                    } else {
                        this.imgPosX = this.startX + e.changedTouches[0].pageX - this.touches.pageX;
                        this.imgPosY = this.startY + e.changedTouches[0].pageY - this.touches.pageY;
                    }

                    setTimeout(() => {
                        this.moveThrottle = false;
                    }, 16)
                }
            },

            hide(e) {
                if (this.imgWidth >= window.innerWidth) {
                    if (this.imgPosX > 0) {
                        this.imgPosX = 0;
                    } else if (this.imgPosX < (window.innerWidth - this.imgWidth)) {
                        this.imgPosX = window.innerWidth - this.imgWidth;
                    }
                } else {
                    this.imgPosX = (window.innerWidth - this.imgWidth) / 2;
                }

                if (this.imgHeight >= window.innerHeight) {
                    if (this.imgPosY > 0) {
                        this.imgPosY = 0;
                    } else if (this.imgPosY < (window.innerHeight - this.imgHeight)) {
                        this.imgPosY = window.innerHeight - this.imgHeight;
                    }
                } else {
                    this.imgPosY = (window.innerHeight - this.imgHeight) / 2;
                }

                if (this.doubleKick) {
                    this.doubleKick = false;

                    if (!this.hasKick) {
                        this.hasKick = true;

                        this.imgWidth *= 1.5;
                        this.imgHeight *= 1.5;
                    } else {
                        this.hasKick = false;

                        if (this.$refs.img.naturalWidth > window.innerWidth) {
                            this.imgWidth = window.innerWidth;
                            this.imgHeight = window.innerWidth / this.imgAspectRatio;
                        } else {
                            this.imgWidth = this.$refs.img.naturalWidth;
                            this.imgHeight = this.$refs.img.naturalHeight;
                        }
                    }

                    this.imgPosX = (window.innerWidth - this.imgWidth) / 2;
                    this.imgPosY = (window.innerHeight - this.imgHeight) / 2;
                } else {
                    if (!this.lT2f && !this.is2f && !this.hasMove) {
                        this.doubleKick = true;

                        this.kickTimer = setTimeout(() => {
                            this.doubleKick = false;
                            this.$emit('close');
                        }, 300)
                    }

                    if (e.touches.length !== 0) {
                        this.lT2f = true;

                        this.touchstart(e);
                    } else {
                        this.lT2f = false;
                    }

                    this.hasMove = false;
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.5);

        img {
            position: absolute;
            top: 0;
            left: 0;

            &.transform {
                transition: all .3s;
            }
        }
    }
</style>